<template>
  <div class="ibox" style="margin-bottom:20px;">
    <div class="ibox-content" id="p_param" style="padding:5px;">
      <div class="ptabhelpr">拖拽维度到此处作为筛选条件</div>
      <template v-for="(p) in pageInfo.params">
				<span :key="p.id" class="pppp">
					<span title="筛选" @click="paramFilter(p.id, p.type, p.name)" class="text">{{p.name}}({{ paramsDisp(p)
            }})</span>
					<button class="btn btn-default btn-xs" title="删除" @click.stop="deleteParam(p.id)"><i class="fa fa-remove"></i></button>
				</span>
      </template>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {findParamById} from '@/views/bi/bireport/bireportUtils'

export default {
  data() {
    return {}
  },
  props: {
    pageInfo: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.paramDrop();
  },
  computed: {
    //ccc: {
    //	get:function(){
    //return "abc";
    //	}
    //var s = p.valStrs&&p.valStrs.length>0?p.valStrs.join(","):"无";
    //return 'abc';
    // }
  },
  methods: {
    paramsDisp(p) {
      if (p.type === 'day' || p.type === 'month') {
        if (p.st && p.end) {
          return p.st + "至" + p.end
        } else {
          return "无";
        }
      } else {
        if (p.valStrs && p.valStrs.length > 0) {
          return p.valStrs.join(",");
        } else {
          return "无";
        }
      }
    },
    /**
     * 参数接受拖拽事件
     */
    paramDrop() {
      const ts = this;
      const pageInfo = ts.pageInfo;
      $("#p_param").droppable({
        accept: "#datasettree .jstree-node",
        tolerance: "pointer",
        over: function (e, ui) {
          var ref = $("#datasettree").jstree(true);
          var node = ref.get_node(ui.draggable[0]);
          var tp = node.li_attr.col_type;
          //对维度拖拽设置图标
          if (tp == 1) {
            $(ui.helper[0]).find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok");
            $(this).css("border", "1px solid #ff0000");
          }
        },
        out: function (e, ui) {
          $(ui.helper[0]).find("span").removeClass("glyphicon-ok").addClass("glyphicon-remove");
          $(this).css("border", "1px solid #d3d3d3");
        },
        drop: function (e, ui) {
          $(this).css("border", "1px solid #d3d3d3");
          var ref = $("#datasettree").jstree(true);
          var node = ref.get_node(ui.draggable[0]);
          var tp = node.li_attr.col_type;
          if (tp == 1) {
            if (!pageInfo.params) {
              pageInfo.params = [];
            }
            //判断是否存在
            if (findParamById(node.li_attr.col_id, ts.pageInfo.params) != null) {
              ts.$notify.error({title: '您已经添加了该参数！', offset: 50});
              return;
            }
            var id = node.li_attr.col_id;
            var p = {
              "id": id,
              "name": node.text,
              "type": node.li_attr.dim_type,
              "colname": node.li_attr.col_name,
              "alias": node.li_attr.alias,
              "tname": node.li_attr.tname,
              "cubeId": node.li_attr.cubeId,
              "valType": node.li_attr.valType,
              "tableName": node.li_attr.tableName,
              "tableColKey": node.li_attr.tableColKey,
              "tableColName": node.li_attr.tableColName,
              "calc": node.li_attr.calc,
              "dimord": node.li_attr.dimord,
              "grouptype": node.li_attr.grouptype,
              "dateformat": (node.li_attr.dateformat == null ? "" : node.li_attr.dateformat),
              dsid: node.li_attr.dsid
            };
            pageInfo.params.push(p);
            var obj = $(this);
            obj.find("div.ptabhelpr").remove();
            if (obj.find("b").length == 0) {
              obj.append("<b>参数： </b>");
            }
            //弹出筛选窗口
            ts.paramFilter(id, p.type, p.name);
          }
        }
      });
    },
    /**
     * 弹出筛选窗口
     */
    paramFilter(id, type, name) {
      this.$parent.$refs['paramFilterForm'].create(id);
    },
    deleteParam(id) {
      $(this.pageInfo.params).each((a, b) => {
        if (b.id == id) {
          this.pageInfo.params.splice(a, 1);
          return false;
        }
      });
      if (this.pageInfo.params.length === 0) {
        $("#p_param").html("<div class=\"ptabhelpr\">拖拽维度到此处作为页面参数</div>");
      }
      this.$parent.$refs['tableForm'].tableView();
      this.$parent.$refs['chartForm'].chartView();
    }
  },
  watch: {}
}
</script>

<style lang="css">
#p_param .ptabhelpr {
  padding: 5px;
  color: #999999;
  font-size: 14px;
}

#p_param span.pppp {
  background-color: #FFFFCC;
  border: 1px solid #CACACA;
  display: inline-block;
  padding: 3px;
  text-align: center;
  margin-right: 3px;
  border-radius: 3px;
}

#p_param span.text {
  cursor: pointer;
}

#p_param span.pppp span.text {
  display: -moz-inline-box;
  white-space: nowrap;
  overflow: hidden;
}
</style>
